import React from 'react';
// import router from '@/router';
import { Layout, Breadcrumb, Button, theme } from 'antd';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';

interface IProps {
  collapsed: boolean;
  setCollapsed: Function;
}
const Header: React.FC<IProps> = prop => {
  const { colorBgContainer } = theme.useToken().token;
  const collapsedIcon = prop.collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />;
  const onCollapsed = () => prop.setCollapsed(!prop.collapsed);

  return (
    <Layout.Header className='main-header' style={{ background: colorBgContainer }}>
      <Button type='text' icon={collapsedIcon} onClick={onCollapsed} className='collapse-btn' />
      <Breadcrumb style={{ margin: '16px 0', color: 'black' }} items={[]}></Breadcrumb>
    </Layout.Header>
  );
};

export default Header;
